<template>
	<view class="setting">
		<view class="head m-flex-row u-row-between">
			<view class="m-flex-row u-row-start">
				<u-avatar :src="`${baseStaticFileUrl}/image/my/head-portrait.svg`" size="47"></u-avatar>
				<view class="u-m-l-26">
					<view class="name">{{$u.test.isEmpty(userInfo.name) ? '' : userInfo.name}}</view>
					<view class="mobile">{{$u.test.isEmpty(userInfo.mobile) ? '' : userInfo.mobile}}</view>
				</view>
			</view>
			<view>
				<u-icon :name="`${baseStaticFileUrl}/image/my/success-blue.png`" width="16" height="13"></u-icon>
			</view>
		</view>

		<view class="operation">
			<view class="operation-item" @click="toPage('/pages-my/update-login-password/update-login-password')">
				<text>修改登录密码</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-line color="#E9E9E9"></u-line>
			<view class="operation-item"
				@click="toPage('/pages-my/update-operation-password/update-operation-password')">
				<text>修改操作密码</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-line color="#E9E9E9"></u-line>
			<!-- <view class="operation-item" @click="toPage('/pages-other/bind-event/bind-event?options=mobile')">
				<text>绑定手机号</text>
				<u-icon name="arrow-right"></u-icon>
			</view> -->
			<u-line color="#E9E9E9"></u-line>
			<view class="operation-item" @click="toPage('/pages-other/bind-event/bind-event?options=wx')">
				<text>绑定微信</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="exit" @click="exit()">
			<text class="u-m-r-10">退出登录</text>
			<u-icon :name="`${baseStaticFileUrl}/image/my/exit.png`"></u-icon>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				userInfo: {
					name: '',
					mobile: '',
					id: '',
				},
				storageKeyEnum: this.$storageKeyEnum,
			};
		},
		onLoad() {
			const userInfo = this.$store.getters.GET_VALUE("GET_USER_INFO")
			console.log("userInfo", userInfo)
			if (userInfo) {
				this.userInfo = userInfo;
			}
		},
		methods: {
			exit() {
				let key = this.storageKeyEnum.wap_gift_exchange_curr_merchant_store + "_" + this.userInfo.id;
				console.log("key:", key)
				let that = this;
				//console.log("that.userInfo.id:", that.userInfo.id)
				uni.showModal({
					title: '确定退出',
					content: '确定退出当前账号？',
					confirmText: '确定',
					cancelText: '取消',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync(that.storageKeyEnum.home_icon_list + that.userInfo.id);
							uni.removeStorageSync(that.storageKeyEnum.twisted_egg_bindingGoodsList);
							uni.removeStorageSync(that.storageKeyEnum.username);
							uni.removeStorageSync(that.storageKeyEnum.password);
							uni.removeStorageSync(key);
							that.$store.commit("SET_TOKEN", '')
							that.$store.commit("SET_USER_INFO", '');
							uni.reLaunch({
								url: '/pages-other/login/login'
							});
						}
					}
				});
			},

			toPage(url) {
				uni.navigateTo({
					url: url,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting {
		font-family: "OPPOSans";

		.head {
			box-sizing: border-box;
			padding: 43rpx 24rpx;
			background-color: #FFFFFF;

			.name {
				color: rgba(0, 0, 0, 0.9);
				font-size: 30rpx;
				line-height: 40rpx;
			}

			.mobile {
				color: rgba(0, 0, 0, 0.7);
				font-size: 26rpx;
				line-height: 34rpx;
				margin-top: 21rpx;
			}
		}

		.operation {
			background-color: #FFFFFF;
			margin-top: 22rpx;

			.operation-item {
				padding: 48rpx 24rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				color: rgba(0, 0, 0, 0.7);
				font-size: $f-base;
				line-height: 34rpx;
			}
		}

		.exit {
			height: 100rpx;
			margin-top: 40rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: rgb(254, 64, 76);
			font-size: 28rpx;
			line-height: 37rpx;
		}
	}
</style>